<ion-header>
  <ion-toolbar>
      <ion-buttons slot="start">
          <ion-button (click)="doClose()">
              <ion-icon slot="icon-only" name="close" color="danger"></ion-icon>
          </ion-button>
      </ion-buttons>
      <ion-title>通讯录</ion-title>
      <ion-buttons slot="end">
        <ion-button (click)="submit()">
            <ion-icon slot="icon-only" name="checkmark" color="success"></ion-icon>
        </ion-button>
    </ion-buttons>
  </ion-toolbar>
    <!-- 搜索框 -->
    <ion-toolbar style="margin-top: 1rem;">
      <ion-searchbar [(ngModel)]="searchInput" placeholder="请输入搜索姓名">
      <!-- <ion-searchbar [(ngModel)]="searchInput" placeholder="请输入搜索姓名" (ionInput)="goSearchResult($event)"> -->
      </ion-searchbar>
      <ion-buttons slot="end">
        <ion-button (click)="goSearchResult()" color="dark">搜索</ion-button>
        <!-- <ion-button (click)="console()" color="dark">取消</ion-button> -->
      </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content>

    <!-- 未搜索时在页面的右侧按顺序显示姓名存在的首字母 -->
    <div>
      <div id="letter">
        <p class="indexed-item" [class.activate]="letter === index" *ngFor="let letter of letters;let i = index"
          (click)="selectIndex(letter)">{{letter}}</p>
        <!-- 判断是否存在#，有的话显示# -->
        <p class="indexed-item" *ngIf="isqita">#</p>  
      </div>
      <!-- 点击右侧检索时页面中间临时显示点击的字母 -->
      <div class="modal" [class.show]="showModal">
          {{index}}
      </div>
    </div>
    <ion-list>
      <p *ngIf="!isSearching">&nbsp;&nbsp;&nbsp;&nbsp;最佳匹配</p>
      <ion-item-group *ngFor="let item of formatContacts;let i = index">
        <!-- 遍历字母，显示通讯录中存在名字首字母为改字母的字母 -->
        <ion-item-divider color="light" id="{{ aLetters[i] }}" *ngIf="item.length>0">
          {{aLetters[i]}}
        </ion-item-divider>
        <ion-item *ngFor="let contact of item">
          <section>{{contact.name}}</section>
          <ion-checkbox slot="start" [(ngModel)]="contact.isChecked"></ion-checkbox>
        </ion-item>
      </ion-item-group>
    </ion-list>
 
</ion-content>